<template>
  <button
    class="szy-switch"
    @click="toggle"
    :class="{ 'szy-switch-checked': SwitchValue }"
    :disabled="DisableValue"
  >
    <span></span>
  </button>
</template>

<script setup lang="ts">
import { ref } from "vue";
// switch组件接收不同的props 为表现不同的组件样式
const props = defineProps({
  value: Boolean,
  disabled: {
    type: Boolean,
    default: false,
  },
});

const SwitchValue = ref(props.value);
const DisableValue = ref(props.disabled);

const toggle = () => {
  SwitchValue.value = !SwitchValue.value;
  console.log(SwitchValue.value);
};
</script>

<style scoped lang="scss">
$h: 22px;
$h2: $h - 4px;
.szy-switch {
  height: $h;
  width: $h * 2;
  border: none;
  background: grey;
  border-radius: calc($h / 2);
  position: relative;
  margin-right: 20px;
  cursor: pointer;
  span {
    position: absolute;
    top: 2px;
    left: 2px;
    height: $h2;
    width: $h2;
    background: white;
    border-radius: $h2;
    transition: left 250ms;
  }
  &[disabled] {
    cursor: not-allowed;
  }
}
button.szy-switch-checked {
  background: #1890ff;
  span {
    left: calc(100% - #{$h2} - 2px);
  }
}
button:focus {
  outline: none;
}
</style>
